<script>
import axios from "axios";

export default {
  name: "UploadPhoto",
  props: ['album_list'],
  data() {
    return {
      fileList: [],
      album_id: ''
    }
  },
  methods: {
    handleRemove(file) {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    handlePictureCardPreview(file) {
      let big = document.getElementsByClassName('big_pic')[0]
      big.parentNode.style.display = 'flex'
      big.src = file.url
    },
    handleChange(file, fileList) {
      let fileSize = file.size
      const FIVE_M = 10 * 1024 * 1024
      if (fileSize > FIVE_M) {
        this.$message.warning("最大上传10M")
        this.handleRemove(file)
        return
      }
      const typeArray = [".jpg", ".png", ".JPG", ".PNG"];
      const type = file.name.substring(file.name.lastIndexOf("."));
      const isImage = typeArray.indexOf(type) > -1;
      if (!isImage) {
        this.$message.warning("上传文件只能是png、jpeg、jpg格式!");
        this.handleRemove(file)
        return
      }
      this.fileList = fileList
    },
    exitBigPic(e) {
      let div = e.target
      if (div.tagName === 'IMG')
        div = div.parentNode
      div.style.display = 'none'
    },
    upload() {
      if(this.album_id === '' ) {
        this.$message.warning("请选择要上传到的相册")
        return
      }
      let form_data = new FormData();
      form_data.append("albumId", this.album_id)
      for (let file of this.fileList) {
        form_data.append("files", file.raw)
      }
      axios.post("/api/photo/upload", form_data)
          .then(res => {
            if (res.data.code === 0) {
              this.$message.success(res.data.msg)
              this.$emit("set")
            } else {
              this.$message.warning(res.data.msg)
            }
          }).catch(err => this.$message.error(err))
    }
  },
  mounted() {
    this.album_id = this.album_list[0].id
  }
}
</script>

<template>
  <div>
    上传到
    <el-select v-model="album_id" placeholder="请选择" style="margin-left: 10px">
      <el-option
          v-for="item in album_list"
          :key="item.id"
          :label="item.status===0?item.name:item.name+'（仅个人）'"
          :value="item.id">
      </el-option>
    </el-select>
    <el-upload
        action="#"
        ref="upload"
        list-type="picture-card"
        :auto-upload="false"
        :on-change="handleChange"
        style="margin-top: 30px;height: 300px;overflow: auto"
        :multiple = 'true'
        :file-list="fileList">
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
        >
        <span class="el-upload-list__item-actions">
                  <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
      </div>
    </el-upload>
    <div style="width: 100%;text-align: right"><button class="upload_btn" v-show="fileList.length!==0" @click="upload">上传</button>
    </div>
  </div>
</template>

<style scoped>
.el-icon-zoom-in:hover {
  color: #409EFF;
}

.el-icon-delete:hover {
  color: #f44336;
}

.upload_btn {
  border-radius: 10px;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  color: #ffffff;
  margin-right: 10px;
  background-color: #409EFF;
  height: 40px;
  width: 100px;
}
</style>